<template>
  <div class="authentication">
    <c-title :hide="false" :text="'客群认证'"></c-title>
    <div class="list" v-if="infoList.length > 0">
      <div class="lis" v-for="item in infoList" :key="item.id" @click="toApply(item.id)">
        <img :src="item.img" alt="" />
        <div class="txt">{{ item.group_name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      infoList: [],
      page: 1,
      total_page: 0,
      isLoadMore: true,
      emptyImg: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fcar-manage%2FlistNone%402x.png"
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    toApply(id) {
      this.$router.push(this.fun.getUrl("carAppeal_special_apply", { group_id: id }));
    },
    async getData() {
      let { data, msg, result } = await $http.post(
        "plugin.car-manage.frontend.controllers.special.apply.get-group-list",
        {
          page_size: 100
        },
        "."
      );
      console.log(data, msg, result);
      if (result) {
        this.infoList = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          page_size: 100
        };
        $http
          .get("plugin.car-manage.frontend.controllers.special.apply.get-group-list", json, "加载中")
          .then(res => {
            this.isLoadMore = true;
            if (res.result == 1) {
              this.infoList = this.infoList.concat(res.data.data);
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0.63rem 0.75rem;
  padding: 0.4rem 0 0.94rem 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
  flex-wrap: wrap;
  .lis {
    flex-shrink: 0;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    margin-top: 0.5rem;
    img {
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 50%;
      margin-bottom: 0.66rem;
    }
    .txt {
      font-size: 0.81rem;
      line-height: 0.98rem;
    }
  }
}
</style>
